<template>
    <div class="persongatelogitem">
        

        <div class="itemMiddle" @click="handleUserNameClick">
            <div class="visitname">
                <span class="username">{{item.user_name}}</span>                
            </div>
            <div class="postTag" v-if="!hideApostLevel"> 
                <div>
                    <van-tag :color=" color" v-if="item.post_level == '1' ">校领导</van-tag>
                    <van-tag :color=" color" v-if="item.post_level == '2' ">正职</van-tag>
                    <van-tag :color=" color" v-if="item.post_level == '3' ">副职</van-tag>
                </div>
            </div>
        </div>         
        <AskItemInfo icon="home-o" label="单位" :value=" item.college_name "  :width="48" />
        <AskItemInfo icon="calendar-o" label="期限" :value=" item.ask_leave_from.substring(0,10) + '至' + item.ask_leave_to.substring(0,10)  + '（'+item.leave_days+'天)'"  :width="48" />
        <AskItemInfo icon="location-o" label="目的地" :value="item.leave_dest" :width="48" />
        <AskItemInfo icon="info-o" label="事由" :value="item.content" limitContent :width="48" />

        <div class="showDetail"   @click="handleClick" v-if="!showBtns">
            查看详情
            <van-icon name="arrow" />
        </div>

        <div class="showDetail detailBtns"  v-if="showBtns">            
            <van-button size="small"  color="#1989fa"  class="optBtns" @click="handleViewUser">人员信息</van-button>
            <van-button size="small" color="#00a8cc" class="optBtns" @click="handleClick">请假详情</van-button>
        </div>
        
    </div>

    <van-popup v-model:show="showDetail" closeable position="bottom" :style="{ height: '70%' }" teleport="body" round>
        <div class="askLeaveDetail">
            <div class="detailTitle">干部请假信息</div>

            <div class="askItems">
                <div class="state">
                    <van-tag v-if="item.done == 0" color="#ff4600" class="taskState">待销假</van-tag>
                    <van-tag v-if="item.done == 1" color="#1989fa" class="taskState">已销假</van-tag>
                </div>
                <AskItemInfo label="请假人" :value="item.user_name+'('+item.user_id+')'" :width="labelWidth"/>
                <AskItemInfo label="所在单位" :value="item.college_name" :width="labelWidth"/>
                <AskItemInfo  label="离校日期" :value=" item.ask_leave_from.substring(0,10) " :width="labelWidth"/>
                <AskItemInfo  label="返校日期" :value="  item.ask_leave_to.substring(0,10) " :width="labelWidth"/>
                <AskItemInfo label="请假天数" :value="item.leave_days + '天' " :width="labelWidth"/>
                <AskItemInfo  label="目的地" :value="item.leave_dest" :width="labelWidth"/>
                <AskItemInfo  label="任务类型" :value="item.task_type" :width="labelWidth"/>
                <AskItemInfo  label="经费类型" :width="labelWidth">
                    <div class="feeItem" v-if="item.LEAVE_SCHOOL_FEE">
                        学校经费，由{{ item.LEAVE_SCHOOL_FEE_TYPE }}经费支付{{item.LEAVE_SCHOOL_FEE_USAGE}}费用
                    </div>
                    <div class="feeItem" v-if="item.LEAVE_INVITOR_FEE">
                        邀请方，支付{{item.LEAVE_INVITOR_FEE_USAGE}}费用
                    </div>
                    <div class="feeItem" v-if="item.LEAVE_OTHER_FEE">
                        其他，{{item.LEAVE_OTHER_FEE_USAGE}}费用
                    </div>
                </AskItemInfo>
                <AskItemInfo  label="事由"  :width="labelWidth">
                    <div>
                        {{ item.content }}
                    </div>
                </AskItemInfo>
            </div>
            
        </div>
    </van-popup>

</template>
<script lang="ts" setup>
import { type AskLeave } from '@/types/common';
import { ref, watch } from 'vue';
import AskItemInfo from './askleave/askItemInfo.vue';
import {useRouter} from 'vue-router'

interface AskLeaveLogProps{
    color:string
    item:AskLeave
    showBtns?:boolean
    hideApostLevel?:boolean
}
const props = defineProps<AskLeaveLogProps>();
const emiter = defineEmits(['detailPopup']);

const labelWidth = ref(65)
const showDetail = ref(false)
const router = useRouter();

watch(showDetail,()=>{
    emiter('detailPopup',showDetail.value)
})

const handleClick = ()=>{
    showDetail.value = true;
}

const handleViewUser = ()=>{
    router.push('/query/person/personAllInfoDetail?id='+props.item.user_id);
}

const handleUserNameClick = ()=>{
    if(props.showBtns){
        handleViewUser()
    }
}

</script>
<style lang="less" scoped>
.persongatelogitem{
    .itemtop{
        display: flex;
        margin-bottom: 6px;
        align-items: center;
        .logtime{
            font-size: 14px;
        }

        
    }

    .itemMiddle{
        
        margin-bottom: 0.1em;
        display: flex;
        align-items:center;
 
        .visitname{
            font-size:16px;
            margin-right: 10px;
            display: flex;
            align-items: center;

            .username{
                font-weight: bold;
                margin-left: 20px;
                font-size: 17px;
            }

            .collegeName{
                font-size: 12px;
            }
        }

        .postTag{
            width: 45px;
        }
    }

    .address{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 10px;
    }

    .showDetail{
        border-top: 1px dashed #dfdfdf;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        margin-top: 10px;
    }

    .showDetail.detailBtns{
        margin-top: 5px;
        padding-top: 5px;
        margin-bottom: -10px;
    }

    .detailBtns{
        display: flex;
        justify-content: right;
        .optBtns{
            margin-right: 10px;
        }
    }
 

 
}

.askLeaveDetail{
    .detailTitle{
        text-align: center;
        margin-top: 10px;
        font-size: 18px;
    }
    .askItems{
        padding:20px;
        background-color: #fff;
        margin-top: 10px;

        .taskState{
            font-size: 14px;
            padding:4px 10px;
        }
    }
}
</style>